﻿<ItemsControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:local="clr-namespace:WP7iPhone" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
    mc:Ignorable="d"
    x:Class="WP7iPhone.AppPageControl"
    BorderThickness="5" Background="Transparent" 
    HorizontalAlignment="Center" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel x:Name="appIcon" 
                Height="132" Width="114"
                Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                <StackPanel.Resources>
                    <!-- 
                        
                        This is the "wobble" Animation which is invoked when the user presses and holds on one of the icons.
                        Still needs some tweaking to match the iPhone look more closely. Also the iPhone icons don't all wobble
                        in sync, so something needs to get added here to introduce either some randomness or some change based
                        on the icon's position.
                        
                        -->
                    <Storyboard x:Name="wobbleStory"  RepeatBehavior="Forever" >
                        <DoubleAnimationUsingKeyFrames 
                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" 
                            Storyboard.TargetName="image">
                            <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                            <LinearDoubleKeyFrame Value="-10" KeyTime="0:0:0.1"/>
                            <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.2"/>
                            <LinearDoubleKeyFrame Value="10" KeyTime="0:0:0.3"/>
                            <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.4"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </StackPanel.Resources>
                <Grid  x:Name="image" RenderTransformOrigin="0.5,0.5" >
                    <!--MouseLeftButtonDown="image_MouseLeftButtonDown" 
                    MouseLeftButtonUp="image_MouseLeftButtonUp"
                    MouseMove="image_MouseMove" 
                    ManipulationDelta="image_ManipulationDelta" > -->
                    <Grid.RenderTransform>
                        <CompositeTransform Rotation="0"/>
                    </Grid.RenderTransform>

                    <!--
                        
                        Triggers for starting and stopping the 'wobble' animation
                        
                        -->
                    <Custom:Interaction.Triggers>
                        <local:WobbleTrigger>
                            <im:ControlStoryboardAction Storyboard="{StaticResource wobbleStory}"/>
                        </local:WobbleTrigger>
                        <local:WobbleTrigger Event="Stop">
                            <im:ControlStoryboardAction Storyboard="{StaticResource wobbleStory}" ControlStoryboardOption="Stop"/>
                        </local:WobbleTrigger>
                    </Custom:Interaction.Triggers>
                    <Image Source="{Binding Image}" Stretch="Uniform" Height="85"/>

                    <!-- Delete button that shows up when the icons are wobbling -->
                    <Button HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource DeleteButton}" Margin="0,5,0,0" Visibility="Collapsed" Click="DeleteButton_Click">
                        <Custom:Interaction.Triggers>
                            <local:WobbleTrigger>
                                <ic:ChangePropertyAction PropertyName="Visibility"/>
                            </local:WobbleTrigger>
                            <local:WobbleTrigger Event="Stop">
                                <ic:ChangePropertyAction PropertyName="Visibility">
                                    <ic:ChangePropertyAction.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </ic:ChangePropertyAction.Value>
                                </ic:ChangePropertyAction>
                            </local:WobbleTrigger>
                        </Custom:Interaction.Triggers>

                    </Button>
                </Grid>
                <TextBlock HorizontalAlignment="Center" Text="{Binding Caption}"  />
            </StackPanel>

        </DataTemplate>
    </ItemsControl.ItemTemplate>

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <controlsToolkit:WrapPanel x:Name="wrapPanel" Width="480">
                <Custom:Interaction.Behaviors>
                    <il:FluidMoveBehavior AppliesTo="Children" Duration="0:0:1">
                    	<il:FluidMoveBehavior.EaseY>
                    		<CubicEase EasingMode="EaseOut"/>
                    	</il:FluidMoveBehavior.EaseY>
                    	<il:FluidMoveBehavior.EaseX>
                    		<CubicEase EasingMode="EaseOut"/>
                    	</il:FluidMoveBehavior.EaseX>
                    </il:FluidMoveBehavior>
                </Custom:Interaction.Behaviors>
            </controlsToolkit:WrapPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>